<template>
  <view>
    <view class="interact-box" @click="goInteractDetail(item.postId)">
      <view class="interact-header">
        <view class="image">
          <image :src="item.userAndMajor.avatar" mode=""></image>
        </view>
        <view class="user-info">
          <view class="name">
            {{item.userAndMajor.nickName}}
          </view>
          <view class="school">
            {{item.userAndMajor.collegeType}} {{ item.createtime | sliceStr}}
          </view>
        </view>
        <uni-icons type="trash" size="20" class="del" @click.native.stop="dialogToggle(item.postId)"
          v-if="item.userAndMajor.studentId === userInfo.studentId"></uni-icons>
      </view>

      <view class="interact-main">

        <view class="text-title">
          <image src="/static/shumiao.png" mode=""></image>
          <text>{{item.title}}</text>
        </view>

        <view class="textInfo">
          {{item.content}}
        </view>
        <view class="image-box" v-if='item.posttype == 1'>
         <!-- <block v-for='(item2,index2) in item.file' :key='index'> -->
            <image :src="item.file[0]" @click.stop.prevent="preview(index)" mode="aspectFit"></image>
          <!-- </block> -->
        </view>
      </view>

      <view class="interact-footer">
        <view class="interact-fn">
          <view class="collect">
            <view class="image" @click.stop.prevent="collect(item.postId)">
              <image :src="item.is_PostCollection==1?'/static/shoucang-active.png':'/static/shoucang.png'" mode="">
              </image>
            </view>
            <view class="value">
              {{item.collectionCount}}
            </view>
          </view>
          <view class="comment">
            <view class="image" @click='comment(item.postId)'>
              <image src="/static/pinglun.png" mode=""></image>
            </view>
            <view class="value">
              {{item.commentCount}}
            </view>
          </view>
          <view class="good">
            <view class="image" @click.stop.prevent="dianzan(item.postId)">
              <image :src="item.is_PostThumbs==1?'/static/dianzan-active.png':'/static/dianzan.png'" mode=""></image>
            </view>
            <view class="value">
              {{item.thumbsCount}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" content="您确定要删除这条动态吗？" @confirm="dialogConfirm"
        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    props: {
      item: Object,
      pid: {
        type: Number
      }
    },
    data() {
      return {
        collectPic: '/static/shoucang.png',
        delId: 0,
      }
    },
    methods: {
      goInteractDetail(id) {
        if (this.pid == 0) return
        uni.navigateTo({
          url: '/subpkg/interactDetail/interactDetail?postId=' + id
        })
      },
      preview(i) {
        uni.previewImage({
          current: i,
          urls: this.item.file
        })
      },
      comment(id) {
        if (this.pid === 0) {
          this.$emit('open')
        } else {
          this.goInteractDetail(id)
        }
      },
      async dianzan(id) {
        if (this.item.is_PostThumbs == 0) {
          this.$emit('changeDianzan', {
            id,
            count: 1
          })
          await uni.$http.post(`/users/post/addthumbs/${id}?studentId=${this.userInfo.studentId}`)
        } else {
          this.$emit('changeDianzan', {
            id,
            count: -1
          })
          await uni.$http.delete(`/users/post/CancelThumbs/${id}?studentId=${this.userInfo.studentId}`)
        }
      },
      async collect(id) {
        if (this.item.is_PostCollection == 0) {
          this.$emit('changeCollect', {
            id,
            count: 1
          })
          const data = await uni.$http.post(`/users/post/collectPosts/${id}?studentId=${this.userInfo.studentId}`)
          console.log(data);
        } else {
          this.$emit('changeCollect', {
            id,
            count: -1
          })
          await uni.$http.delete(`/users/post/delCollectPosts/${id}?studentId=${this.userInfo.studentId}`)
        }
      },
      dialogToggle(id) {
        this.$refs.alertDialog.open()
        this.delId = id
      },
      dialogClose() {
        this.$refs.alertDialog.close()
      },
      async dialogConfirm() {
        await uni.$http.delete(`/users/post/deleteMyPosts?studentId=${this.userInfo.studentId}`, {
          id: this.delId
        })
        this.$emit('getInfo')
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    filters: {
      sliceStr(str) {
        if (str) {
          return str.slice(0, 10)
        }
      }
    },
  }
</script>
<style lang="scss">
  .interact-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 30rpx;
    padding: 10rpx 30rpx;
    background-color: #fff;

    .interact-header {
      display: flex;
      position: relative;

      .image {
        width: 80rpx;
        height: 80rpx;
        margin-top: 10rpx;
        border-radius: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: top;
        margin-left: 30rpx;

        .name {
          margin-top: 14rpx;
          font-size: 26rpx;
        }

        .school {
          margin-top: 6rpx;
          font-size: 24rpx;
          color: #777;
        }
      }

      .del {
        position: absolute;
        top: 20rpx;
        right: 10rpx;
      }
    }

    .interact-main {
      margin-top: 30rpx;

      .text-title {
        display: flex;
        align-items: center;
        padding: 15rpx 0;
        text-align: left;

        image {
          width: 64rpx;
          height: 64rpx;
        }

        text {
          display: inline-block;
          height: 64rpx;
          margin-left: 10rpx;
          font-size: 36rpx;
          font-weight: 700;
          line-height: 64rpx;
        }
      }

      .textInfo {
        margin-top: 10rpx;
        color: #555;
      }

      .image-box {
        // width: 30%;
        // height: 400rpx;
        margin: 0 auto;
        margin-top: 20rpx;

        image {
          // width: 100%;
          // height: 100%;
        }
      }
    }

    .interact-footer {
      display: flex;
      height: 90rpx;
      margin-top: 30rpx;
      border-top: 1rpx solid #eee;

      .interact-fn {
        display: flex;
        justify-content: space-between;
        width: 100%;

        .collect,
        .comment,
        .good {
          display: flex;
          align-items: center;
          width: 200rpx;
          height: 100rpx;
          // margin-right: 30rpx;

          .image {
            width: 50rpx;
            height: 50rpx;
            margin-left: 55rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .value {
            margin-left: 10rpx;
            font-size: 30rpx;
          }
        }
      }
    }
  }
</style>